<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣契合度测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#ff7eb3">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center my-5">情侣契合度测试</h1>
        <div id="app" class="card shadow-lg">
            <div class="card-body p-5">
                <div id="form-container">
                    <!-- 表单将通过JavaScript动态渲染 -->
                </div>
                <div id="result-container" style="display: none;">
                    <h2 class="text-center mb-4">测试结果</h2>
                    <div class="progress mb-4" style="height: 30px;">
                        <div id="compatibility-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" style="width: 0%"></div>
                    </div>
                    <div id="analysis-result" class="text-center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 确保DOM完全加载后再执行脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 检查脚本是否已加载
            if (typeof initApp === 'function') {
                initApp();
            } else {
                console.error('app.js未正确加载');
            }
        });
    </script>
    <script src="app.js"></script>
</body>
</html>